<template>
  <div class="payEdit">
    <div class="title">Pay Edit</div>
    <div class="content">
      <div class="pay_info_edit" v-if="oEditPayInfo">
        <el-steps  direction="vertical" :active="5" class="pay_info_edit_content" >
          <el-step title="">
            <div slot='description' class="pay_info_edit_item">
              <div class="question">What are {{oEditPayInfo.personName}}'s  withholdings ?</div>
              <div class="answer">
                {{oEditPayInfo.withHolding}}
            <span v-touch-ripple class="answer_edit_icon iconfont" @click="goPage('editPerson')">&#xe607;</span>
              </div>
            </div>
          </el-step>
          <!--how often -->
          <el-step title="">
            <div slot='description' class="pay_info_edit_item">
              <div class="question">How often do you pay {{oEditPayInfo.personName}}?</div>
              <el-row class="answer" style="width:600px">
                <el-col :span="8">
                  <el-select v-model="payInfoEditModel.payScheduleId" >
                    <el-option v-for="(item,key) in oEditPayInfo.howOften" :label="item.scheduleName" :value="item.id" :key="key"  ></el-option>
                  </el-select>
                </el-col>
                <el-col :span="10" :offset="1">
                  <span v-if="howOftenObject">starting {{howOftenObject.nextPayDay}}</span><span v-touch-ripple class="answer_edit_icon iconfont" @click="goPage('howOften')">&#xe607;</span>
                </el-col>
              </el-row>
            </div>
          </el-step>
          <!--how much  payType-->
          <el-step title="">
            <div slot='description' class="pay_info_edit_item">
              <div class="question">How much do you pay {{oEditPayInfo.personName}}?</div>
              <div class="answer">
                <el-row class="answer" style="width:600px">
                  <el-col :span="8">
                    <el-select v-model="payInfoEditModel.payType">
                      <el-option v-for="(item,key) in oEditPayInfo.payType" :label="item.showName" :key="key"  :value="item.value"></el-option>
                    </el-select>
                  </el-col>
                  <!--hourly-->
                  <template v-if="payInfoEditModel.payType ==1">
                    <el-col :span="1" :offset="1" style="padding-right:5px;text-align:right">$</el-col>
                    <el-col :span="3">
                      <el-input-number style="width: 70px"  v-model="payInfoEditModel.payRate" :controls="false" size="small" :min="0" ></el-input-number>
                    </el-col>
                    <el-col :span="2" style="padding-left:5px">/hour</el-col>
                  </template>
                  <!--salary-->
                  <template v-if="payInfoEditModel.payType ==2">
                    <el-col :span="1" :offset="1" style="padding-right:5px;text-align:right">$</el-col>
                    <el-col :span="3">
                      <el-input-number style="width: 70px"  v-model="payInfoEditModel.payRate" :controls="false" size="small" :min="0" ></el-input-number>
                    </el-col>
                    <el-col :span="4" style="padding-left:5px">
                      <el-select v-model="payInfoEditModel.payRange">
                        <el-option v-for="(item,key) in oEditPayInfo.payRange" :key="key"  :label="item.showName" :value="item.value"></el-option>
                      </el-select>
                    </el-col>
                  </template>
                </el-row>
                <el-row>
                  <el-button type="text">{{oEditPayInfo.additionPayType}}</el-button>
                  <span v-touch-ripple class="answer_edit_icon iconfont" @click="goPage('howMuch')">&#xe607;</span>
                </el-row>
              </div>
            </div>
          </el-step>

          <!--deduction-->
          <el-step title="">
            <div slot='description' class="pay_info_edit_item">
              <div class="question">Does {{oEditPayInfo.personName}} have any deductions? (Examples: retirement, health care) ?</div>
              <div class="answer" v-if="oEditPayInfo.deduction">
                <el-row v-for="(item,key) in oEditPayInfo.deduction" :key="key" ><el-col :span="8">{{item.deductionNotes}}</el-col><el-col :span="8"> <span  v-touch-ripple class="answer_edit_icon iconfont">&#xe607;</span> <span v-touch-ripple class="answer_edit_icon iconfont" @click="deleteDeduction(item.employeeDeductionId)">&#xe60;</span></el-col></el-row>
                <el-button type="text" @click="goPage('addDeduction')">Add a new deduction</el-button>
              </div>
            </div>
          </el-step>
          <el-step title="">
            <div slot='description' class="pay_info_edit_item">
              <div class="question">How do you want to pay Chester ?</div>
              <div class="answer">
                Paper Check
              </div>
            </div>
          </el-step>
        </el-steps>
        <!--提交-->
        <div class="pay_info_edit_btn_group">
          <el-button type="primary" @click="submit">Done</el-button>
          <el-button @click="$router.back()">Cancel</el-button>
        </div>
      </div>
    </div>
  </div>

<!--  <div class="loading_content" v-else v-loading="true"  element-loading-text="loading"></div>-->
</template>

<script>
  export default {
    components:{
    },
    data:function(){
      return{
        loading:true,
        payInfoEditModel:{
          payScheduleId:null,
          payType:null,
          payRate:null,
          payRange:null
        },
        howOftenObject:null
      }
    },
    created:function(){
      this.$store.dispatch('initEditPayInfo',{personId:this.getPersonId()})
    },
    activated:function(){
      //this.$store.dispatch('initEditPayInfo',{personId:this.getPersonId()})
    },
    computed:{
      oEditPayInfo(){
        if(this.$store.getters.editModel){
          this.payInfoEditModel = JSON.parse(JSON.stringify(this.$store.getters.editModel));
        }else{
          if(this.$store.getters.oEditPayInfo){
            this.payInfoEditModel.payType =  this.$store.getters.oEditPayInfo.payTypeVal;
            this.payInfoEditModel.payScheduleId = this.$store.getters.oEditPayInfo.payScheduleId;
            this.payInfoEditModel.payRate = this.$store.getters.oEditPayInfo.payRate;
            this.payInfoEditModel.payRange = this.$store.getters.oEditPayInfo.payRangeVal || 1;
          }
        }
        return this.$store.getters.oEditPayInfo;
      },
      oInitEditPayInfoDeduction(){
        return this.$store.getters.oInitEditPayInfoDeduction;
      },
      oInitEditPayInfoHowOften(){
        return this.$store.getters.oInitEditPayInfoHowOften;
      },
      oInitEditPayInfoPayRange(){
        return this.$store.getters.oInitEditPayInfoPayRange;
      },
      oInitEditPayInfoPayType(){
        return this.$store.getters.oInitEditPayInfoPayType;
      }
    },
    watch:{
      'payInfoEditModel.payScheduleId':function(value){
          if(this.oEditPayInfo.howOften){
            this.howOftenObject =  this.oEditPayInfo.howOften.filter(function (item) {
              return item.id == value;
            })[0]
          }
      }
    },
    mounted:function(){
    },
    methods:{
      getPersonId(){
        return this.$route.params.id;
      },
      goPage(type){
        var path;
        switch (type){
          case "howOften":
            path = '/payRoll/payRollCenter/employeeInfo/payEdit/payOftenEdit/';
            break;
          case 'howMuch':
            path = '/payRoll/payRollCenter/employeeInfo/payEdit/payMuchEdit/';
            break;
          case 'addDeduction':
            path = '/payRoll/payRollCenter/employeeInfo/payEdit/addDeduction/';
            break;
          case 'editPerson':
            path = '/payRoll/payRollCenter/employeeInfo/payEdit/EmployeePayEditEmployee/';
            break;
        }
        this.$store.commit('setCommonStateData',{key:'editModel',data:this.payInfoEditModel});
        this.$router.push(path+this.getPersonId())
      },
      deleteDeduction(deductionId){
        var t =this;
        t.$confirm('Delete this deduction?', 'Info', {
          confirmButtonText: 'Confirm',
          cancelButtonText: 'Cancel',
          type: 'warning'
        }).then(() => {
            t.$store.dispatch('deleteDeduction',{param:{id:deductionId},success:function () {
              t.$message.success('delete Success!');
              t.$store.dispatch('initEditPayInfo',{personId:t.getPersonId()})
            }})
        })
      },
      submit(){
        var t = this;
        var param = t.payInfoEditModel;
        param.personId = t.getPersonId();
        t.$store.dispatch('savePayInfo',param).then(function () {
          t.$message.success('save Success');
          t.$router.back();
        });
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  rel="stylesheet/scss"  type="text/css" lang="scss" scoped>

  @import "../../assets/css/variable";
  #payEdit{
    >.content{
      padding: 0;
    }
  }
  .pay_info_edit {
    min-height: 100%;
    background-color: #fff;
    padding: 50px;
    box-sizing: border-box;
    .pay_info_edit_content{
      .pay_info_edit_item{
        padding-left: 20px;
        margin-bottom: 10px;
        .question{
          line-height: 26px;
          font-size: 18px;
          color: #333;
        }
        .answer{
          padding: 10px 0;
          line-height: 30px;
          font-size: 14px;
          color: #777;
          &:hover{
            background: #efefef;
            .answer_edit_icon{
              display: inline-block;
            }
          }
          .answer_edit_icon{
            margin-left: 20px;
            display: none;
          }
        }
      }
    }
    .pay_info_edit_btn_group{
      padding-left: 50px;
    }
  }
</style>
